<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-09 09:42:04
 * @FilePath: \vue3_test\src\App.vue
 * @Description: Demo
-->
<template>
  <h2>当前求和为: {{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前点击时鼠标的坐标为: x:{{ point.x }} , y:{{ point.y }}</h2>
</template>

<script>
import { ref } from "vue";
import usePoint from "../hooks/usePoint";
export default {
  name: "DemoTest",
  setup() {
    let sum = ref(0);
    let point = usePoint();
    // 鼠标“打点”功能
    // #region
    /*  let point = reactive({
      x: 0,
      y: 0,
    });

    function savePoint(event) {
      point.x = event.pageX;
      point.y = event.pageY;
      console.log(event.pageX, event.pageY);
    }

    onMounted(() => {
      window.addEventListener("click", savePoint);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("click", savePoint);
    }); */
    // #endregion
    // 返回一个对象(常用)
    return {
      sum,
      point,
    };
  },
};
</script>
